<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅行社系统 - 公司资料</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/main.css">
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="container-fluid">
            <div class="row">
                <sidebar-nav 
                    current-page="workarea"
                    @logout="handleLogout">
                </sidebar-nav>

                <!-- 主内容区 -->
                <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                        <h1 class="h2">公司资料</h1>
                    </div>

                    <form @submit.prevent="handleSubmit" class="needs-validation" novalidate>
                        <!-- 基本信息 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">基本信息</h5>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">公司名称</label>
                                        <input type="text" class="form-control" v-model="form.Name" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">英文名称</label>
                                        <input type="text" class="form-control" v-model="form.EnglishName" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">香港旅行社牌照号码</label>
                                        <input type="text" class="form-control" v-model="form.LicenseNo" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">分销商等级</label>
                                        <input type="text" class="form-control" v-model="form.ResellerRank" required>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 联系信息 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">联系信息</h5>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">经理姓名</label>
                                        <input type="text" class="form-control" v-model="form.ManagerName" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">联系电话</label>
                                        <input type="tel" class="form-control" v-model="form.TelNo" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">城市代码</label>
                                        <input type="text" class="form-control" v-model="form.CityCode" required>
                                    </div>
                                    <div class="col-md-12">
                                        <label class="form-label">地址</label>
                                        <input type="text" class="form-control" v-model="form.Address">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- PDF打印信息 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">PDF打印信息</h5>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">公司Logo</label>
                                        <div class="d-flex align-items-center mb-2">
                                            <img :src="logoUrl" 
                                                 alt="公司Logo" 
                                                 class="me-3"
                                                 style="width: 90px; height: 90px; object-fit: contain; border: 1px solid #dee2e6;">
                                            <div>
                                                <input type="file" 
                                                       class="form-control mb-2" 
                                                       ref="logoInput"
                                                       @change="handleLogoUpload" 
                                                       accept="image/png,image/jpeg">
                                                <div class="text-muted small">
                                                    支持 PNG、JPG 格式，建议尺寸 90x90 像素
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">打印显示名称</label>
                                        <input type="text" class="form-control" v-model="form.PDFName">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">打印显示地址</label>
                                        <input type="text" class="form-control" v-model="form.PDFAddress">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">打印显示电话</label>
                                        <input type="tel" class="form-control" v-model="form.PDFTelNo">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">打印显示联系人</label>
                                        <input type="text" class="form-control" v-model="form.PDFContactName">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">打印显示邮箱</label>
                                        <input type="email" class="form-control" v-model="form.PDFEmail">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-12">
                                        <label class="form-label">收款账户信息（每行用逗号分隔）</label>
                                        <textarea class="form-control" 
                                                  v-model="form.PDFBankInfo" 
                                                  rows="4"
                                                  placeholder="例如：开户行：XX银行，账号：XXXX，户名：XXX"></textarea>
                                        <div class="text-muted small" v-if="form.PDFBankInfo">
                                            当前值: {{ form.PDFBankInfo }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 其他信息 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">其他信息</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label class="form-label">备注</label>
                                    <textarea class="form-control" v-model="form.Memo" rows="3"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-end mb-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save"></i> 保存修改
                            </button>
                        </div>
                    </form>
                </main>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/api/config.js"></script>
    <script src="js/api/auth.js"></script>
    <script src="js/components/Sidebar.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                form: {
                    Name: '',
                    EnglishName: '',
                    LicenseNo: '',
                    ManagerName: '',
                    ManagerUserNames: '',
                    TelNo: '',
                    CityCode: '',
                    Address: '',
                    ResellerRank: '',
                    Memo: '',
                    PDFLogoUrl: '',
                    PDFName: '',
                    PDFAddress: '',
                    PDFContactName: '',
                    PDFTelNo: '',
                    PDFEmail: '',
                    PDFBankInfo: ''
                },
                currentUser: null,
                isLoading: true
            },
            async created() {
                try {
                    console.log('Workarea page created');
                    const userStr = localStorage.getItem(API_CONFIG.USER_KEY);
                    if (userStr) {
                        this.currentUser = JSON.parse(userStr);
                        if (this.currentUser.workarea_id) {
                            await this.loadWorkarea();
                        } else {
                            console.error('No workarea_id in user data');
                        }
                    }
                } catch (error) {
                    console.error('Workarea initialization failed:', error);
                } finally {
                    this.isLoading = false;
                }
            },
            methods: {
                async loadWorkarea() {
                    try {
                        console.log('Loading workarea data...');
                        const response = await window.apiClient.get(`/api/workarea/${this.currentUser.workarea_id}`);
                        console.log('Workarea data loaded:', response.data);
                        this.form = { ...this.form, ...response.data };
                    } catch (error) {
                        console.error('加载工作区信息失败:', error);
                        alert('加载工作区信息失败');
                    }
                },
                async handleSubmit() {
                    try {
                        await window.apiClient.put(`/api/workarea/${this.currentUser.workarea_id}`, this.form);
                        alert('保存成功！');
                    } catch (error) {
                        console.error('保存失败:', error);
                        alert('保存失败');
                    }
                },
                handleLogout() {
                    window.auth.logout();
                    window.location.href = '/login.html';
                },
                async handleLogoUpload(event) {
                    const file = event.target.files[0];
                    if (!file) return;

                    // 验证文件类型
                    if (!['image/png', 'image/jpeg'].includes(file.type)) {
                        alert('只支持 PNG 和 JPG 格式的图片');
                        return;
                    }

                    // 验证文件大小（例如限制为 2MB）
                    if (file.size > 2 * 1024 * 1024) {
                        alert('图片大小不能超过 2MB');
                        return;
                    }

                    try {
                        const formData = new FormData();
                        formData.append('file', file);

                        const response = await window.apiClient.post(
                            '/api/workarea/logo',
                            formData,
                            {
                                headers: {
                                    'Content-Type': 'multipart/form-data'
                                }
                            }
                        );

                        // 更新这里的 URL 拼接
                        const apiHost = API_CONFIG.API_HOST || 'http://erpapi.hkpublicholiday.com';
                        this.form.PDFLogoUrl = `${apiHost}/images/workarea_logo_${this.currentUser.workarea_id}.png`;
                        alert('Logo 上传成功！');
                    } catch (error) {
                        console.error('Logo 上传失败:', error);
                        alert('Logo 上传失败');
                    }
                }
            },
            computed: {
                logoUrl() {
                    if (this.currentUser && this.currentUser.workarea_id) {
                        const apiHost = API_CONFIG.API_HOST || 'http://erpapi.hkpublicholiday.com';
                        return `${apiHost}/images/workarea_logo_${this.currentUser.workarea_id}.png`;
                    }
                    return 'images/default-logo.png';
                }
            }
        });
    </script>
</body>
</html> 